import React from 'react';

interface ContentProps {
    activeTab: 'images' | 'videos' | 'music';
    files: File[];
    onDelete: (index: number) => void;
}

const Content: React.FC<ContentProps> = ({ activeTab, files, onDelete }) => {
    return (
        <div>
            <h2>{activeTab === 'images' ? '全部图片' : activeTab === 'videos' ? '全部视频' : '全部音乐'} ({files.length})</h2>
            {files.length === 0 ? (
                <p>空状态：没有可显示的内容</p>
            ) : (
                <ul>
                    {files.map((file, index) => (
                        <li key={index}>
                            {activeTab === 'images' && file instanceof File ? (
                                <img src={URL.createObjectURL(file)} alt={file.name} style={{ width: '100px', height: 'auto' }} />
                            ) : (
                                <span>{file.name}</span>
                            )}
                            <button onClick={() => onDelete(index)}>删除</button>
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
};

export default Content;